<template>
    <div class="completed">
        <v-table
                :emotion="'success'"
                :headers="['title','id','format', 'proxy', 'startTime', 'endTime','operation']"
                :rows-size="completed.length"
        >
            <template #header-id>视频id</template>
            <template #header-format>编码</template>
            <template #header-proxy>代理</template>
            <template #header-title>标题</template>
            <template #header-startTime>开始时间</template>
            <template #header-endTime>完成时间</template>
            <template #header-operation>操作</template>

            <template #row-id="{ header, index }">
                {{ completed[index][header]}}
            </template>

            <template #row-format="{ header, index }">
                {{ completed[index][header] }}
            </template>

            <template #row-proxy="{ header, index }">
                {{ completed[index][header] }}
            </template>

            <template #row-title="{ header, index }">
                {{ completed[index][header] }}
            </template>

            <template #row-startTime="{ header, index }">
                {{ formatDate(completed[index][header]) }}
            </template>

            <template #row-endTime="{ header, index }">
                {{ formatDate(completed[index][header]) }}
            </template>

            <template #row-operation="{index}">
                <a title="历史日志" class="iconfont icon-log" @click="showLog( completed[index] )"/>
            </template>

        </v-table>

        <log-dialog :show="logDialog.show" @close=" () => logDialog.show = false " :msg="logDialog.logMsg"/>
    </div>
</template>

<script>
    import FComponents from 'f-vue-components';
    import TaskService from "../script/api/TaskService";
    import FUtils from 'fo-utils';
    import LogDialog from "../components/LogDialog.vue";
    import LogService from "../script/api/LogService";

    const StringUtils = FUtils.StringUtils;
    const ArrayUtils = FUtils.ArrayUtils;

    export default {
        name: "Completed",
        components: {
            "v-table": FComponents.Table,
            LogDialog
        },
        data() {
            return {
                completed: [],
                logDialog: {
                    show: false,
                    logMsg: ''
                }
            };
        },
        methods: {
            formatDate(time) {
                let dt = new Date(time);
                return dt.getFullYear() +
                    '-' + StringUtils.fixLength(dt.getMonth() + 1, 2, '0') +
                    '-' + StringUtils.fixLength(dt.getDate() + 1, 2, '0') +
                    ' ' + StringUtils.fixLength(dt.getHours(), 2, '0') +
                    ':' + StringUtils.fixLength(dt.getMinutes(), 2, '0') +
                    ':' + StringUtils.fixLength(dt.getSeconds(), 2, '0');
            },
            showLog(task) {
                LogService.logs(task.id, task.format)
                    .then(log => {
                        this.logDialog.logMsg = log;
                        this.logDialog.show = true;
                    });
            }
        },
        created() {
            TaskService.getAllCompleted().then(arr => {
                console.log(arr);
                ArrayUtils.copy(arr, this.completed);
            });
        }
    }
</script>

<style lang="less">
    div.completed {
        .table {
            margin-top: 1rem;

            .table-header {
                .row {
                    .cell {
                        padding: 0.7rem 0.625rem;
                    }
                }
            }

            .row {
                .cell {
                    overflow-x: scroll;
                    padding: 0.3125rem 0.625rem;

                    &.cell {
                        &-id {
                            flex: none;
                            width: 9rem;
                        }

                        &-format {
                            flex: none;
                            width: 6rem;
                        }

                        &-title {
                            flex: none;
                            width: 60rem;
                        }

                        &-proxy {
                            flex: none;
                            width: 13rem;
                        }

                        &-endTime {
                            flex: none;
                            width: 11rem;
                        }

                        &-startTime {
                            flex: none;
                            width: 11rem;
                        }

                        &-operation {
                            a {
                                font-size: 1.5rem;
                                cursor: pointer;
                                margin-right: 5px;
                            }

                            width: 5rem;
                            flex: none;
                        }
                    }
                }
            }
        }
    }

</style>